<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <el-row>
      <el-col :span="22"
        ><el-form
          size="small"
          :inline="true"
          @submit.native.prevent
          v-show="showSearch"
          label-width="80px"
        >
          <el-form-item label="设备编号">
            <el-select
              v-model="searchForm.deviceCode"
              placeholder="请选择"
              filterable
            >
              <el-option
                v-for="item in deviceNos"
                :key="item.value"
                :label="item.label1"
                :value="item.value"
              >
                <span style="float: left">{{ item.label1 }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.label2
                }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备名称" prop="deviceName">
            <el-input
              v-model="searchForm.deviceName"
              placeholder="请输入"
              clearable
              @keyup.enter.native="getInfo"
            />
          </el-form-item>
          <el-form-item label="线别名称" prop="lineId">
            <el-input
              v-model="searchForm.lineId"
              placeholder="请输入"
              clearable
              @keyup.enter.native="getInfo"
            />
          </el-form-item>
          <el-form-item label="所属课别" prop="dept">
            <el-input
              v-model="searchForm.dept"
              placeholder="请输入"
              clearable
              @keyup.enter.native="getInfo"
            />
          </el-form-item>
          <el-form-item label="值" prop="value">
            <el-input
              v-model="searchForm.value"
              placeholder="请输入"
              clearable
              @keyup.enter.native="getInfo"
            />
          </el-form-item>
          <el-form-item label="异常项目" prop="project">
            <el-input
              v-model="searchForm.project"
              placeholder="请输入"
              clearable
              @keyup.enter.native="getInfo"
            />
          </el-form-item>
          <el-form-item label="区分">
            <el-select
              v-model="searchForm.type"
              placeholder="请选择"
              filterable
              clearable
            >
              <el-option
                v-for="item in types"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="发生时间">
        <el-date-picker
          value-format="yyyy-MM-dd"
          v-model="searchForm.handleDate"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="mini"
          style="width: 200px"
        >
        </el-date-picker>
      </el-form-item> -->
        </el-form></el-col
      >
      <el-col :span="2">
        <div style="background: #f0f8ff">
          <el-statistic
            ref="statistic"
            @finish="hilarity"
            format="mm:ss"
            :value="timeDown"
            time-indices
          >
            <template slot="title">即将刷新</template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          size="mini"
          @click="handleSearch('搜索')"
          class="button"
          plain
          >搜索</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          size="mini"
          @click="handleReset('1')"
          class="button"
          plain
          >重置</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getInfo"
        :columns="columns"
      ></right-toolbar>
    </el-row>

    <!-- 表 -->
    <el-table
      v-loading="loading"
      :data="tableList"
      border
      :max-height="THeight"
    >
      <el-table-column
        label="序号"
        align="center"
        prop="Index"
        width="50"
        v-if="columns[0].visible"
      />
      <el-table-column
        label="设备编号"
        align="center"
        prop="deviceCode"
        v-if="columns[1].visible"
      />
      <el-table-column
        label="设备名称"
        align="center"
        prop="deviceName"
        v-if="columns[2].visible"
      />
      <el-table-column
        label="线别名称"
        align="center"
        prop="lineId"
        v-if="columns[3].visible"
      />
      <el-table-column
        label="所属课别"
        align="center"
        prop="dept"
        v-if="columns[4].visible"
      />
      <el-table-column
        label="值"
        align="center"
        prop="value"
        v-if="columns[8].visible"
      />
      <el-table-column
        label="异常项目"
        align="center"
        prop="project"
        v-if="columns[5].visible"
      />
      <el-table-column
        label="异常原因"
        align="center"
        prop="reason"
        v-if="columns[6].visible"
      />
      <el-table-column
        label="发生时间"
        align="center"
        prop="dateTime"
        width="150"
        v-if="columns[7].visible"
      />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleFn(scope.row)"
            >处置</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <pagination
      :total="total"
      :page.sync="Page.pageNum"
      :limit.sync="Page.pageSize"
      @pagination="getInfo()"
    />
    <!-- 处置dialog -->
    <el-dialog
      v-loading="dialogLoading"
      title="处置"
      :visible.sync="handleOpen"
      width="450px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="dialogCancel"
    >
      <el-card>
        <el-form ref="ngForm" :model="ngForm" :rules="rules" label-width="85px">
          <el-form-item label="设备编号" prop="deviceCode">
            <el-input v-model="ngForm.deviceCode" disabled />
          </el-form-item>
          <el-form-item label="设备名称" prop="deviceName">
            <el-input v-model="ngForm.a" disabled />
          </el-form-item>
          <el-form-item label="线别名称" prop="lineId">
            <el-input v-model="ngForm.s" disabled />
          </el-form-item>
          <el-form-item label="所属课别" prop="dept">
            <el-input v-model="ngForm.d" disabled />
          </el-form-item>
          <el-form-item label="值" prop="value">
            <el-input v-model="ngForm.value" disabled />
          </el-form-item>
          <el-form-item label="异常项目" prop="project">
            <el-input v-model="ngForm.project" disabled />
          </el-form-item>
          <el-form-item label="异常原因" prop="reason">
            <el-input v-model="ngForm.reason" disabled />
          </el-form-item>
          <el-form-item label="发生时间" prop="dateTime">
            <el-input v-model="ngForm.dateTime" disabled />
          </el-form-item>
          <el-form-item label="解锁工号" prop="user">
            <el-input v-model="ngForm.user" clearable placeholder="请输入" />
          </el-form-item>
          <el-form-item label="处置类型" prop="type1">
            <el-select
              v-model="ngForm.type1"
              size="small"
              filterable
              clearable
              @change="ChangeDisposeMode"
              style="width: 100%"
            >
              <el-option
                v-for="item in disposeModes1"
                :key="item.id"
                :label="item.type1"
                :value="item.type1"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="处置方式"
            prop="type2"
            style="width: 300px"
            v-if="show == 0"
          >
            <el-input v-model="ngForm.type2" clearable placeholder="请输入" />
          </el-form-item>
          <el-form-item
            label="处置方式"
            prop="type2"
            style="width: 300px"
            v-if="show == 1"
          >
            <el-select v-model="ngForm.type2" size="small" filterable clearable>
              <el-option
                v-for="item in disposeModes2"
                :key="item.id"
                :label="item.type2"
                :value="item.type2"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="success" plain size="mini" @click="UnLock"
              >解锁</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import ErrorDataMixins from "./errorDataMixins";
import {
  reqGetActionType,
  reqActionResult,
  reqSendEMail,
} from "@/api/newApi/OCAP/index.js";
export default {
  mixins: [ErrorDataMixins],
  data() {
    return {
      searchForm: { state: 1 }, //1未处置
      //处置弹框
      handleOpen: false,
      ngForm: {},
      show: null,
      rules: {
        user: [{ required: true, message: "解锁工号必填", trigger: "blur" }],
        type1: [{ required: true, message: "处置类型必选", trigger: "blur" }],
        type2: [{ required: true, message: "处置方式必填", trigger: "blur" }],
      },
      //处置方式
      oldDisposeModes: [],
      disposeModes1: [],
      disposeModes2: [],
      intervalId: null, //定时器
      timeDown: Date.now() + 5 * 60 * 1000,
      // 显示搜索条件
      showSearch: true,
      // 列信息
      columns: [
        { key: 0, label: `序号`, visible: true },
        { key: 1, label: `设备编号`, visible: true },
        { key: 2, label: `设备名称`, visible: true },
        { key: 3, label: `线别名称`, visible: true },
        { key: 4, label: `所属课程`, visible: true },
        { key: 8, label: `值`, visible: true }, // 新增
        { key: 5, label: `异常项目`, visible: true },
        { key: 6, label: `异常原因`, visible: true },
        { key: 7, label: `发生时间`, visible: true },
      ],
    };
  },
  mounted() {
    this.dataRefreh();
  },
  destroyed() {
    // 在页面销毁后，清除计时器
    this.clearTimer();
  },
  methods: {
    getTagText(TimeEnd) {
      if (
        moment(new Date()).format("yyyy-MM-DD HH:mm:ss") <
        moment(TimeEnd).format("yyyy-MM-DD HH:mm:ss")
      ) {
        return "进行中";
      } else if (
        moment(new Date()).format("yyyy-MM-DD HH:mm:ss") >
          moment(TimeEnd).format("yyyy-MM-DD HH:mm:ss") &&
        moment(new Date()).format("yyyy-MM-DD HH:mm:ss") <
          moment(TimeEnd).add(2, "hours").format("YYYY-MM-DD HH:mm:ss")
      ) {
        return "待出箱";
      } else if (
        moment().add(2, "hours").format("YYYY-MM-DD HH:mm:ss") >=
        moment(TimeEnd).format("yyyy-MM-DD HH:mm:ss")
      ) {
        return "超时未出箱";
      }
    },
    // 定时刷新数据函数
    dataRefreh() {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return;
      }
      // 计时器为空，5min刷新一次
      this.intervalId = setInterval(() => {
        // console.log("刷新" + new Date());
        this.timeDown = Date.now() + 5 * 60 * 1000;
        this.getInfo();
      }, 5 * 60 * 1000);
    },
    // 停止定时器
    clearTimer() {
      clearInterval(this.intervalId); //清除计时器
      this.intervalId = null; //设置为null
    },
    hilarity() {},
    //处置
    async handleFn(row) {
      //获取该项目处置方式
      this.dialogLoading = true;
      let res = await reqGetActionType({
        project: row.project,
        pageNum: 0,
        pageSize: 0,
      });
      this.dialogLoading = false;
      //赋值
      if (res.code == 0) {
        let arr = [{ id: 0, type1: "未定义" }];
        if (res.data.length > 0) {
          this.oldDisposeModes = res.data[0].types;
          let distinct = [];
          this.oldDisposeModes.reduce((pre, item) => {
            if (!pre.includes(item.type1)) {
              distinct.push({ id: pre.length + 1, type1: item.type1 });
              pre.push(item.type1);
            }
            return pre;
          }, []);
          this.disposeModes1 = arr.concat(distinct);
        } else {
          this.disposeModes1 = arr;
        }
      } else {
        this.$modal.msgError(res.message);
      }
      //打开dialog
      this.ngForm = {
        ...row,
        user: null,
      };
      this.handleOpen = true;
    },
    //解锁
    UnLock() {
      this.$refs["ngForm"].validate(async (valid) => {
        if (valid) {
          let reqForm = {
            id: this.ngForm.resultId,
            deviceCode: this.ngForm.deviceCode,
            unitNo: this.ngForm.unitNo,
            user: this.ngForm.user,
            type1: this.ngForm.type1,
            type2: this.ngForm.type2,
            listFACA: [],
          };
          let res1 = await reqActionResult(reqForm);
          if (res1.code == 0) {
            this.handleOpen = false;
            this.$modal.msgSuccess("解锁成功");
            let res2 = await reqSendEMail({
              deviceCode: reqForm.deviceCode,
              resultId: reqForm.id,
              NextStepName: "FACA1",
              NextStepNameZh: "FACA工程师",
            });
            if (res2.code == 200) {
              this.$modal.msgSuccess("邮件已发送");
            } else {
              this.$modal.msgWarning(res2.msg);
            }
            this.getInfo();
          } else {
            this.$modal.msgError(res1.msg);
          }
        }
      });
    },
    //处置方式改变
    ChangeDisposeMode(val) {
      this.$set(this.ngForm, "type2", undefined);
      if (val == "") {
        this.show = null;
      } else if (val === "未定义") {
        this.show = 0;
      } else {
        this.show = 1;
        //更新disposeModes2
        this.disposeModes2 = [];
        this.oldDisposeModes.forEach((item) => {
          if (item.type1 == val) {
            this.disposeModes2.push({
              id: this.disposeModes2.length,
              type2: item.type2,
            });
          }
        });
      }
    },
    //关闭弹框
    dialogCancel() {
      this.ngForm = {};
      this.show = null;
      this.resetForm("ngForm");
    },
  },
};
</script>

<style lang="scss" scoped>
//表头颜色
::v-deep .el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
  background-color: #f0f8ff !important;
}

//dialog
::v-deep .el-dialog__body {
  padding: 0 20px 10px 20px;
}

::v-deep .el-card__body {
  padding: 10px 10px 10px 10px;
}

//倒计时
::v-deep .el-statistic .head {
  margin-bottom: 0px;
  color: #1890ff;
  font-size: 15px;
  font-weight: 700;
}

::v-deep .el-statistic {
  color: #1890ff;
  font-weight: 700;
}
</style>